<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta name="keywords" charset=utf-8/>
<!--[if !IE]> -->
  <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
  <!-- <![endif]-->
  <!--[if IE]>
      <script src="http://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
  <![endif]-->
<style>
*{
  margin:0;
  padding:0px;
  height: 100%;
}

.left{
	background-color: antiquewhite;
	width: 300px;
	float: left;
}
.left1{
	height: 50%;
	background: burlywood;
}
.right{
	background-color: aliceblue;
	margin-left: 300px;
}
.right1{
	height: 50%;
	background-color: aqua;
}
</style>
</head>
<body>
  <div class="content">
  	<div class="left">
  		<div id="left1" class="left1">left1</div>
  		<div class="left2">left2</div>
  	</div>
  	<div class="right">
  		<div id="right1" class="right1">right1</div>
  		<div>right2</div>
  	</div>
  </div>
<script>
function zoom(id){
	var change = document.getElementById(""+id);
	var width = change.clientWidth;
	var height = change.clientHeight;
	change.onmouseover = function(){
		this.style.width=width*1.5+"px";
		this.style.height=height*1.5+"px";
		this.style.backgroundColor = "#F00";
		this.style.zIndex = 100;
	}
	change.onmouseout = function(){
		this.style.width=width+"px";
		this.style.height=height+"px";
		this.style.backgroundColor = "";
		this.style.zIndex = "";
	}


}
zoom("left1");

var name = "The Window";   
　　var object = {   
　　　　name : "My Object",   
　　　　getNameFunc : function(){   
　　　　　　return function(){   
　　　　　　　　return this.name;   
　　　　　};   
　　　　}   
};
alert(object.getNameFunc()());  //The Window   
</script>
</body>
</html>